<template>
	<view>
		<!-- 页首 -->
		<zw-header></zw-header>
		<!-- 左侧导航栏 -->
		<menu-wrapper active-index="2-2">
			<view style="display: flex;justify-content: flex-start;align-items: center;margin-top: 20px;">
				<view :class="tabIndex==1?'title_activie':'title'" @click="clickTab(1)">我赞过的</view>
				<view :class="tabIndex==2?'title_activie':'title'" @click="clickTab(2)" style="margin-left: 50px;">我收藏的
				</view>
			</view>
			<view style="display: flex;justify-content: flex-start;align-items: center;margin-top: 25px;">
				<view :class="tabIndexCategory==1?'button_active':'button'" @click="clickCategory(1)">AI生成</view>
				<view style="margin-left: 15px;" :class="tabIndexCategory==2?'button_active':'button'" @click="clickCategory(2)">
					帖子</view>
				<view style="margin-left: 15px;" :class="tabIndexCategory==3?'button_active':'button'" @click="clickCategory(3)">
					合集</view>
			</view>
			<view class="container" v-if="list.length>0"> 
				
					<liu-waterfall v-if="list.length > 0" :dataList="list" :column="columns"
						@click="click"></liu-waterfall>
			</view>
			<view v-else class="empty-tip">您暂未收藏任何商品。</view>
		</menu-wrapper>

		<!-- 页脚 -->
		<zw-footer></zw-footer>
	</view>
</template>

<script>
	import menuWrapper from '@/components/user/common/menu-wrapper.vue';

	export default {
		components: {
			menuWrapper
		},
		data() {
			return {
				goodsList: [],
				tabIndex: 1,
				tabIndexCategory:1,
				list:[],
				columns:6,
			}
		},
		onLoad() {
			this.findGoodsList();
		},
		methods: {
			click(){},
			clickTab(index) {
				this.tabIndex = index
			},
			clickCategory(index) {
				this.tabIndexCategory = index
			},
			findGoodsList() {
				let that=this;
				this.$util.request('/api/v1/love', {size: 100000,queryType:1,type: that.tabIndexCategory}, (res) => {
					uni.hideLoading();
					console.log('收藏数据', res)
					this.goodsList = res;
					for (var i = 0; i < res.data.length; i++) {
						res.data[i].pictureCollection.loved=true;
						that.list.push(res.data[i].pictureCollection) 
					}
					console.log(that.list)
					// this.list = res.data
				}, true);
			},
			deleteGoods(id) {
				this.$alert('确定要删除吗？', {}, () => {
					uni.showLoading({
						title: '处理中...',
						mask: true
					});
					this.$util.request('/favorite/delete', {
						id
					}, (res) => {
						uni.hideLoading();
						this.findGoodsList();
					});
				});
			},
			goDetail(id) {
				uni.navigateTo({
					url: `/pages/goods/index?id=${id}`
				});
			}
		}
	}
</script>

<style lang="scss">
	.button_active {
		font-family: 思源黑体;
		font-size: 14px;
		font-weight: normal;
		text-align: center;
		letter-spacing: 0px;
		color: #FFFFFF;
		border-radius: 50px;
		background: #000000;
		padding: 5px 15px 5px 15px;
	}

	.button {
		border-radius: 50px;
		opacity: 1;
		background: #FFFFFF;
		box-sizing: border-box;
		border: 1px solid #C4BFBF;
		font-family: 思源黑体;
		font-size: 14px;
		font-weight: normal;
		text-align: center;
		letter-spacing: 0px;
		color: #000000;
		padding: 5px 15px 5px 15px;
	}

	.title_activie {
		font-family: 思源黑体;
		font-size: 18px;
		font-weight: 900;
		letter-spacing: 0px;
		color: #000000;
	}

	.title {

		font-family: 思源黑体;
		font-size: 18px;
		font-weight: 500;
		letter-spacing: 0px;
		color: #666666;
	}

	.container {
		width: 100%;
		margin: 14px auto 0;
		display: flex;
		.goods {
			width: 260px;
			height: 348px;
			padding-top: 40px;
			padding-right: 34px;
			border-bottom: 1px solid #e0e0e0;
			text-align: center;

			&:hover {

				.btn-wrap {
					display: flex;
				}
			}

			.thumb {
				width: 200px;
				height: 200px;
			}

			.name {
				margin-top: 10px;
				max-width: 250px;
				color: $text-color;
				font-weight: 400;
			}

			.price {
				margin-top: 5px;
				color: $color-primary;
			}

			.btn-wrap {
				margin-top: 36px;
				@extend %flex-align-center;
				justify-content: center;
				display: none;

				.btn {
					width: 108px;
					height: 30px;
					line-height: 28px;
					margin: 0 7px;
					font-size: 12px;
					cursor: pointer;

					&.btn-gray {
						border: 1px solid #b0b0b0;
						background-color: #fff;
						color: #b0b0b0;

						&:hover {
							color: #fff;
							background-color: #757575;
							border-color: #757575;
						}
					}

					&.btn-primary {
						background-color: $color-primary;
						border: 1px solid $color-primary;
						color: #fff;

						&:hover {
							opacity: .8;
						}
					}
				}
			}
		}
	}

	.empty-tip {
		margin: 60px 0;
		font-size: 18px;
		text-align: center;
		color: #b0b0b0;
	}
</style>